window.onload = function(){
	var game = new Game;
	game.start();
};
function Game(){
	var self = this;
	var codearea = document.getElementById('codearea');
	var hammar = document.getElementById('hammar');
	var mouse = document.getElementById('mouse'); 
	
	var hammar = new (function Hammar(DOM){
		var self = this;
		//Add new Style
		self.setStyle = function(styles,callback){
			for(var i=0;i<styles.length;i++){
				var style = styles[i];
				DOM.style[style.key] = style.value;
			}
			callback();
		};
	})(hammar);

	var mouse = new (function Mouse(DOM){
		var self = this;
		//Mouse Image changes when being hitted
		self.hitted = function(){
		};
	})(mouse);


	//Parse input style string to array of KV object
	self.parseInput = function(input){
		input= input.replace(/\s/ig,'');		
		var result = [];
		var sentences = input.split(';');
		for(var i=0;i<sentences.length;i++){
			var sentence = sentences[i];
			sentence = sentence.split(':');
			sentence.length === 2 ? result.push({key:sentence[0],value:sentence[1]}) : 0;
		}
		return result;
	};
	//Start game
	self.start = function(){
		codearea.onkeyup = function(e){
			//Add style when meet with ';'
			if(e.keyCode === 186 && !e.shiftKey){
				hammar.setStyle(self.parseInput(codearea.value),self.isEnd);
			}
		};
	};
	//Is game over
	self.isEnd = function(){
		var shabi = document.getElementById('hammar');
		var topValue = shabi.offsetTop;
		var leftValue = shabi.offsetLeft;
	    if (250 <= topValue && topValue <= 330)  {
			if (5 <= leftValue && leftValue <= 175){
					self.end();
				}
	};
	//Game over
	self.end = function(){
				alert("Well Done!");
	};
}
